<template>
  <div>
    <div class="box">
      <p>
        一个基于spring boot、spring
        oauth2.0、mybatis、redis的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城
      </p>
    </div>
    <div class="box">
      <p>
        该项目仅供学习参考、可供个人学习使用、如需商用联系作者进行授权，否则必将追究法律责任
      </p>
    </div>
    <div class="box">
      <p class="title">前言</p>
      <p>
        mall4j商城项目致力于为中小企业打造一个完整、易于维护的开源的电商系统，采用现阶段流行技术实现。后台管理系统包含商品管理、订单管理、运费模板、规格管理、会员管理、运营管理、内容管理、统计报表、权限管理、设置等模块。
      </p>
    </div>
    <div class="box">
      <p class="title">技术选型</p>
      <div class="table">
        <el-table
          :data="tableData"
          border
          style="width: 570px"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
        >
          <el-table-column prop="date" label="技术" width="180">
          </el-table-column>
          <el-table-column prop="name" label="版本" width="180">
          </el-table-column>
          <el-table-column prop="address" label="说明"> </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="box">
      <div class="title">部署教程</div>
      <div class="box1">
        <h3>1.开发环境</h3>
        <div class="table">
          <el-table
            :data="tableData2"
            border
            style="width: 200px"
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
          >
            <el-table-column prop="date" label="工具"> </el-table-column>
            <el-table-column prop="name" label="版本"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="box">
        <h3>2.启动</h3>
        <ul>
          <li>推荐使用idea，安装lombok插件，使用idea导入maven项目</li>
          <li>
            将shop.sql导入到mysql中，修改 application-dev.yml更改
            datasource.url、user、password
          </li>
          <li>启动redis</li>
          <li>
            推荐使通过 WebApplication启动项目后台接口， ApiApplication
            启动项目前端接口
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //   设置表头样式
      headerCellStyle({ row, column, rowIndex, columnIndex }) {
        return {
          color: "#1F2D3D",
          fontSize: "14px",
          textAlign: "center",
        };
      },
      //   设置表格样式
      cellStyle({ row, column, rowIndex, columnIndex }) {
        return {
          fontSize: "14px",
          color: "#1F2D3D",
        };
      },
      tableData: [
        {
          date: "Spring Boot",
          name: "2.1.6.RELEASE	",
          address: "MVC核心框架",
        },
        {
          date: "Spring Security oauth2",
          name: "2.1.5.RELEASE",
          address: "认证和授权框架",
        },
        {
          date: "MyBatis",
          name: "3.5.0",
          address: "ORM框架",
        },
        {
          date: "MyBatisPlus",
          name: "3.1.0",
          address: "基于mybatis，使用lambda表达式的",
        },
        {
          date: "Swagger-UI",
          name: "2.9.2",
          address: "文档生产工具",
        },
        {
          date: "Hibernator-Validator",
          name: "6.0.17.Final",
          address: "验证框架",
        },
        {
          date: "redisson",
          name: "3.10.6",
          address: "对redis进行封装、集成分布式锁等",
        },
        {
          date: "hikari",
          name: "3.2.0",
          address: "数据库连接池",
        },
        {
          date: "log4j2",
          name: "2.11.2",
          address: "更快的log日志工具",
        },
        {
          date: "fst",
          name: "2.57",
          address: "更快的序列化和反序列化工具",
        },
        {
          date: "orika",
          name: "1.5.4",
          address: "更快的bean复制工具",
        },
        {
          date: "lombok",
          name: "	1.18.8",
          address: "简化对象封装工具",
        },
        {
          date: "hutool",
          name: "4.5.0",
          address: "更适合国人的java工具集",
        },
        {
          date: "swagger-bootstrap",
          name: "1.9.3",
          address: "基于swagger，更便于国人使用的swagger ui",
        },
      ],
      tableData2: [
        {
          date: "jdk",
          name: "1.8+",
        },
        {
          date: "mysql",
          name: "5.7+",
        },
        {
          date: "redis",
          name: "3.2+",
        },
      ],
    };
  },
};
</script>

<style scoped>
/* 表格边框 */
.custom-table-border .el-table__header-wrapper th,
.custom-table-border .el-table__body-wrapper td {
  border-width: 2px;
  border-color: #000;
}
.box {
  padding: 10px;
}
.title {
  font-size: 21px;
  color: #303133;
  font-weight: 600;
}
.table {
  padding-left: 50px;
}
h3 {
  font-size: 16px;
  color: #303133;
}
.box1 {
  margin-top: 50px;
}
li {
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
}
p {
  line-height: 1.5;
}
</style>
